<template>
  <div>
    <el-card style="margin-top: 10px;padding-left: 20px">
      <div style="display: flex;justify-content: space-around ">
        <el-form-item label="用户名" style="width: 250px">
          <el-input clearable v-model="paramObj.userName"></el-input>
        </el-form-item>
        <el-button @click="findByItem" type="primary">按名字查询用户以及角色</el-button>
      </div>
    </el-card>
    <el-card style="height: 600px">
      <el-row>
        <el-col :span="22">
          <div style="display: flex ;justify-content: space-around">
            <el-table :data="proList" height="365" stripe style="margin-bottom: 20px">
              <el-table-column prop="userName" label="用户名" v-if="!flag"></el-table-column>
              <el-table-column prop="roleName" label="角色"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="danger" v-if="flag" @click="disableRole(scope.row.urId)">禁用角色</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <sapn>权限：{{ op }}</sapn>

        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      flag: true,
      paramObj: {},
      user: {},
      proList: [],
      totalPrice: 0,
      op: []
    }
  }
  , methods: {

    findByItem() {
      this.proList = []
      axios.get("/project/user/findByUserName", {params: {userName: this.paramObj.userName}}).then(resp => {
        if (resp.data != "") {
          this.proList = resp.data
          this.show();
          console.log(this.proList )


        }
      })
    },
    disableRole(id) {
      console.log(id)
      axios.get("/project/user/findById", {params: {urId: id}}).then(resp => {
        if (resp.data == "ok") {
          ElMessage({
            message: '禁用成功',
            type: 'success',
          })
        }
      })
    },
    show() {
      axios.get("/project/user/findAllByUserName", {params:{userName:this.paramObj.userName}}).then(
          re => {
            this.op = re.data;
          }
      )

    }
  }
}
</script>

<style scoped>

</style>